<!DOCTYPE html>
<html ng-app="MyModel">
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script src="I:\UserManager\UserManager\src\main\webapp\resources\js\angular\angular.js"></script>

</head>
<body>
	<div ng-controller="MyCtrl1">
		<loader howtoLoad="loadData1()">数据加载中。。。。</loader>
	</div>

	<div ng-controller="MyCtrl2">
		<loader howtoLoad="loadData2()">数据加载中。。。。222</loader>
	</div>


	<script>
		var myModel = angular.module("MyModel",[]);
		myModel.controller('MyCtrl1', ['$scope', function($scope){
			$scope.loadData1=function(){
				console.log("加载数据中");
			}
		}])
		myModel.controller('MyCtrl2', ['$scope', function($scope){
			$scope.loadData2=function(){
				console.log("加载数据中2222");
			}
		}])
		myModel.directive('loader',function(){
			return {
				restrict: 'AE', 

				link: function(scope, element, iAttrs) {
					element.bind("mouseenter",function(){
						// scope.loadData();
						// scope.$apply("loadData()");
						scope.$apply(iAttrs.howtoload);
					});
				}
			};
		});

	</script>
</body>
</html>